import {defineComponent,ref,onMounted,Fragment} from "vue"
import {NPagination} from "naive-ui"
export default defineComponent({
    name: "mypage",
    props:{
        total:{
            type:Number,
            default:0,
        },
        pageSizeList:{
            default(data:Array<any>|undefined|null){
                if(Array.isArray(data)){
                    return data
                }else{
                    return [10,20,30,40,50]
                }
            },
        },
        pageSize:{
            type:Number,
            default:20,
        },
    },
    emits:["get"],
    setup({total,pageSizeList,pageSize},{emit,expose,slots}){
        const page = ref(1)
        const pageSizenum = ref(20)
        const changePage=(pageObj:{page?:number,pageSize?:number}|null=null)=>{
            if(pageObj && pageObj.page){
                page.value = pageObj.page
            }
            if(pageObj && pageObj.pageSize){
                pageSizenum.value = pageObj.pageSize
            }
            emit("get",page.value,pageSizenum.value)
        }
        onMounted(()=>{
            changePage()
        })
        // 抛出的属性和方法
        expose({changePage})
        // 初始化
        const init=()=>{
            pageSizenum.value = pageSize
        }
        init()
        return ()=>(<Fragment>
            {slots.msg ? slots.msg() : null}
            <NPagination page={page.value} pageSize={pageSizenum.value} pageSizes={pageSizeList} onUpdatePage={(page) => changePage({page})} onUpdatePageSize={(pageSize) => changePage({pageSize})} itemCount={total} size={"medium"} showSizePicker={true}/>
        </Fragment>)
    },
})
